<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>员工管理</title>
		<link rel="stylesheet"  href="../../bootstrap-3.4.1-dist/css/bootstrap.min.css"/>
		<link rel="stylesheet"  href="../../css/A3.css"/>
		<link rel="stylesheet" href="../../css/index.css">
		<link rel="stylesheet" href="../../css/A3_yuangong.css">
	</head>
	<!-- 模态框--修改用户 -->
	<div id="alterUser" class="modal fade" onclick="" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">信息修改</h4>
				</div>
	
				<div class="modal-body">
					<!--模态框--修改--表单内容-->
					<form>
						<div class="form-group">
							<label for="stuNumber" class="control-label">工号:</label>
							<input type="text" class="form-control" id="stuNumber">
						</div>
						<div class="form-group">
							<label for="stuName" class="control-label">姓名:</label>
							<input type="text" class="form-control" id="stuName">
						</div>
						<div class="form-group">
							<label for="stuIdCard" class="control-label">身份证:</label>
							<input type="text" class="form-control" id="stuIdCard">
						</div>
						<div class="form-group">
							<label for="stuRFID" class="control-label">RFID卡号:</label>
							<input type="text" class="form-control" id="stuRFID">
						</div>
						<div class="form-group">
							<label for="stuPhone" class="control-label">联系电话:</label>
							<input type="text" class="form-control" id="stuPhone">
						</div>
						<div class="form-group">
							<label for="stuZhuangtai" class="control-label">在职状态:</label>
							<input type="text" class="form-control" id="stuZhuangtai">
						</div>
						<div class="form-group">
							<label for="stuGrade" class="control-label">操作等级:</label>
							<input type="text" class="form-control" id="stuGrade">
						</div>
					</form>
				</div>
	
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="changeStu()">确认修改</button>
				</div>
	
			</div>
		</div>
	</div>
	
	<!-- 模态框--添加用户 -->
	<div id="addUser" class="modal fade" onclick="" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="exampleModalLabel">添加员工</h4>
				</div>
				<div class="modal-body">
					<!--模态框--添加结构 -->
					<form>
						<div class="form-group">
							<label for="stuNumber" class="control-label">工号:</label>
							<input type="text" class="form-control" id="addStuNumber">
						</div>
						<div class="form-group">
							<label for="stuName" class="control-label">姓名:</label>
							<input type="text" class="form-control" id="addStuName">
						</div>
						<div class="form-group">
							<label for="stuIdCard" class="control-label">身份证:</label>
							<input type="text" class="form-control" id="addStuIdCard">
						</div>
						<div class="form-group">
							<label for="stuRFID" class="control-label">RFID卡号:</label>
							<input type="text" class="form-control" id="addStuRFID">
						</div>
						<div class="form-group">
							<label for="stuPhone" class="control-label">联系电话:</label>
							<input type="text" class="form-control" id="addStuPhone">
						</div>
						<div class="form-group">
							<label for="stuZhuangtai" class="control-label">在职状态:</label>
							<input type="text" class="form-control" id="addStuZhuangtai">
						</div>
						<div class="form-group">
							<label for="stuGrade" class="control-label">操作等级:</label>
							<input type="text" class="form-control" id="addStuGrade">
						</div>
					</form>
				</div>
	
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="addStudent()">确认添加</button>
				</div>
			</div>
		</div>
	</div>
	<body>
		<!-- 公共部分头部 -->
			<header id="gonggong_header"> 
				<div id="gonggong_user">
					<div >
						<i class="glyphicon glyphicon-user"></i>
					</div>
					<div id="gonggong_username">
						<p>姓名: <span>1</span></p>
						<p>工号: <span>1</span></p>
					</div>
				</div>
				<div id="login_out">
					<p>退出</p>
				</div>
			</header>
			<!-- 公共部分尾部 -->
			<div id="gonggong_content">
				<!-- 公共部分侧边栏 -->
				<div id="gonggong_left" >
					<ul class="nav nav-tabs nav-stacked navbar-inverse">
						<li class="CeBian"></li>
						<!-- 公共部分图片位置，注意相对路径 -->
						<li class="CeBian"><a href="员工管理整合.html"><img src="../../images/CeBian-YGGL.png">员工管理</a></li>
						<li class="CeBian"><a href="商品管理整合.html"><img src="../../images/CeBian-SPGL.png">商品管理</a></li>
						<li class="CeBian"><a href="销售管理整合.html"><img src="../../images/CeBian-XSGL.png">销售管理</a></li>
						<li class="CeBian"><a href="../cuxiao/cuxiao.html"><img src="../../images/CeBian-CXHD.png">促销活动</a></li>
						<li class="CeBian"><a href="上货整合.html"><img src="../../images/CeBian-SH.png">上货</a></li>
						<li class="CeBian"><a href="收银整合.html"><img src="../../images/CeBian-SY.png">收银</a></li>
					</ul>
				</div>
				<!-- 公共部分右边块 -->
				<div id="gonggong_right">
					<!-- 私有部分放置处 -->
					<div id="gonggong_siyou">
						<div id="yuangong_center_right" class="">
		
							<div>
								<div class="head">
									<div class="head_imgtext">
										<p>
											<span class="glyphicon glyphicon-th-large" id="cx_tp"></span>
											<span>员工管理</span>
										</p>
									</div>
									<hr>
		
									<!--选项卡-->
									<ul id="myTab" class="nav nav-tabs">
										<li class="active"><a href="#zfbt" data-toggle="tab">查看员工</a></li>
										<li><button type="button" class="btn btn-primary" onclick="zuhe()" style="color: #555;
													   cursor: default;
													   background-color: #fff;
													   border: 0;
													   width: 88px;
													   height: 41px;
													   border-bottom-color: transparent;" data-toggle="modal"
												data-target="#addUser" data-whatever="@mdo">
												<a href="#cjbt" data-toggle="tab">添加员工</a>
											</button>
										</li>
										<li><a href="#pvbt" data-toggle="tab">搜索员工</a></li>
									</ul>
									<hr>
									<div id="myTabContent" class="tab-content" style="margin-top: 20px;">
										<div class="tab-pane fade in active" id="zfbt">
											<!--查看员工静态页面-->
											<div id="zf" style="width:100%;height:400px;">
												<!--表格-->
												<div id="table" class="">
													<table id="tab" class="table table-striped">
														<!--表头 -->
														<thead>
															<tr>
																<th>工号</th>
																<th>姓名</th>
																<th>身份证</th>
																<th>RFID卡号</th>
																<th>联系电话</th>
																<th>在职状态</th>
																<th>操作等级</th>
																<th>操作</th>
															</tr>
														</thead>
														<!--主体 -->
														<tbody id="studentTable">
															<!-- 这个表格结构由渲染得到，所以不需要在这里写表格结构 -->
														</tbody>
													</table>
		
													<!--页码-->
													<div id="yuangong_fanye" class="">
														<div id="gonggong_fanye" class="">
															<nav aria-label="Page navigation">
																<ul class="pagination">
																	<!-- 上一页 -->
																	<li id="prev" onclick="prevPage()">
																		<a href="#" aria-label="Previous">
																			<span aria-hidden="true">&laquo;</span>
																		</a>
																	</li>
		
																	<!-- 下一页 -->
																	<li id="next" onclick="nextPage()">
																		<a href="#" aria-label="Next">
																			<span aria-hidden="true">&raquo;</span>
																		</a>
																	</li>
																</ul>
															</nav>
														</div>
													</div>
		
												</div>
											</div>
										</div>
		
										<!--添加员工静态页面-->
										<div class="tab-pane fade" id="cjbt">
											<div id="cj" class="float_left" style="width: 1503.39px;height:400px;">
												<!-- <form id="addyuangong" class="form-inline">
		
		
													<div id="addyuangong_text">
		
														<div id="addyuangong_text_left" class=".czpl">
															<div class="form-group">
																<label for="exampleInputName2">*RFID卡号</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*员工姓名</label>
																<input type="text" class="form-control" id="exampleInputEmail2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*密码</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*工号</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*身份证</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
														</div>
		
														<div id="addyuangong_text_right" class=".czpl">
															<div class="form-group">
																<label for="exampleInputName2">*出生日期</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*入职日期</label>
																<input type="text" class="form-control" id="exampleInputName2"
																	placeholder="请输入内容">
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*在职状态</label>
																<select>
																	<option>待业</option>
																	<option>在岗</option>
																	<option>离职</option>
																	<option>退休</option>
																</select>
															</div>
		
															<div class="form-group">
																<label for="exampleInputName2">*操作等级</label>
																<select>
																	<option>1</option>
																	<option>2</option>
																	<option>3</option>
																</select>
															</div>
															<div class="form-group">
																<label for="exampleInputName2">*上传照片</label>
		
															</div>
														</div>
		
		
													</div>
		
		
												</form>
												<button type="submit" class="btn btn-default">确认添加</button> -->
											</div>
										</div>
		
										<!--搜索员工静态页面-->
										<div class="tab-pane fade" id="pvbt">
											<div id="pv" style="width: 1503.39;height:400px;">
		
												<div id="sousuo">
													<div class="input-group">
														<input type="text" class="form-control" placeholder="请输入员工名字或工号"
															aria-describedby="basic-addon2">
														<span class="input-group-addon" id="basic-addon2"><i class="
																	glyphicon glyphicon-search"></i></span>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		
			<script src="../../bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js"></script>
			<script src="../../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
			<script>
				//模拟的json数据源
				var student = [/*number:工号,name,idCard:身份证号,RFID,phone,zhuangtai:操作状态,grade:操作等级*/
					{ number: '1001', name: '张三', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1002', name: '李四', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '2' },
					{ number: '1003', name: '王五', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1004', name: '赵二', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '退休', grade: '3' },
					{ number: '1005', name: '刘六', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1006', name: '李狗蛋', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '2' },
					{ number: '1007', name: '张嘎子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '3' },
					{ number: '1008', name: '李泉蛋', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '离职', grade: '1' },
					{ number: '1009', name: '周吴', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1010', name: '冯伟', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '退休', grade: '3' },
					{ number: '1011', name: '苏芳华', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1012', name: '蒋正', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1013', name: '孔三斤', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1014', name: '一娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '离职', grade: '2' },
					{ number: '1015', name: '二娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1016', name: '三娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '2' },
					{ number: '1017', name: '四娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1018', name: '五娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '退休', grade: '3' },
					{ number: '1019', name: '六娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1020', name: '七娃子', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1021', name: '擎天', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1022', name: '曹孔儿', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '1' },
					{ number: '1023', name: '伟东西', idcard: '523233197809091234', rfid: 'ASDKFSFSDKFJ0EE3KD', phone: '13258231798', zhuangtai: '在职', grade: '2' },
				]
				var maxPage = 0 //最大的页码数
				var dangqianyeNum = 1//当前所点击的页码
				var jintong = 1
		
				//执行的函数
				showYema()//执行函数渲染页码
				showTable(dangqianyeNum)//执行函数
		
		
				//表格
				function showTable(dangqianye) {//用来渲染页面
					//let data = student数组的截取(根据当前页来截取的)
					let qishi = (dangqianye - 1) * 3  //表格的起始条数
					let data = student.slice(qishi, qishi + 3)  //表格的结束条数
					$('#studentTable').html('') //清空
					for (var i = 0; i < data.length; i++) {//渲染表结构
						$('#studentTable').append(`
						<tr>
							<td>${data[i].number}</td>
							<td>${data[i].name}</td>
							<td>${data[i].idcard}</td>
							<td>${data[i].rfid}</td>
							<td>${data[i].phone}</td>
							<td>${data[i].zhuangtai}</td>
							<td>${data[i].grade}</td>
							<td>
								<button id="button1" type="button" class="btn btn-danger" data-toggle="modal" data-target="#alterUser" 
								data-number="${data[i].number}" 
								data-name="${data[i].name}"
								data-idcard="${data[i].idcard}"
								data-rfid="${data[i].rfid}"
								data-phone="${data[i].phone}"
								data-zhuangtai="${data[i].zhuangtai}"
								data-grade="${data[i].grade}"
								>修改</button>
								<button id="button2" onclick="suoding()" type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">锁定</button>
								<button id="button3" onclick="delRow(${data[i].number})" type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal">删除</button>
							</td>
						</tr>
						`)
					}
					$('.pages').eq(dangqianye - 1).addClass('active').siblings().removeClass('active')
				}
		
		
				//页码
				function showYema() {//动态显示翻页页码
					$('.pages').remove()
					maxPage = Math.ceil(student.length / 3)
					for (var i = 1; i <= maxPage; i++) {
						$('#next').before(`
					<li class="pages" onclick="changeYema(this)"><a href="#">${i}</a></li>
					`)
					}
					$('.pages').eq(dangqianyeNum - 1).addClass('active').siblings().removeClass('active')
				}
				function changeYema(obj) {//点击页码，改变表格信息
					//这里我想做什么？  把对面也数据渲染到对应的表格里边
					//根据分析  showTbale(dangqianyeNum) 我如何知道点了第几页
					// console.log(
					console.log($(obj).children().text())  //测试
					console.log($(obj).children().text())
					dangqianyeNum = parseInt($(obj).children().text())
					showTable(dangqianyeNum)
				}
				function prevPage() {//上一页
					if (dangqianyeNum > 1) {
						dangqianyeNum = dangqianyeNum - 1
						showTable(dangqianyeNum)
					}
				}
				function nextPage() {//下一页
					if (dangqianyeNum < maxPage) {
						dangqianyeNum = dangqianyeNum + 1
						showTable(dangqianyeNum)
					}
				}
		
		
				//修改按钮
				function changeStu() {//修改表单内容，并保存修改渲染到表格里边
					//1.获取表单里边的值
					var number = $('#stuNumber').val()//获取
					var name = $('#stuName').val()
					var idcard = $('#stuIdCard').val()
					var rfid = $('#stuRFID').val()
					var phone = $('#stuPhone').val()
					var zhuangtai = $('#stuZhuangtai').val()
					var grade = $('#stuGrade').val()
					// console.log(number,name,idcard,rfid,phone,zhuangtai,grade)测试是否拿到上述的值
					//把上述的值装进下边
					var newStu = {
						number: number,
						name: name,
						idcard: idcard,
						rfid: rfid,
						phone: phone,
						zhuangtai: zhuangtai,
						grade: grade
					}
					//2.根据修改的内容，修改数据源
					for (var i = 0; i < student.length; i++)
						if (number == student[i].number) {
							student.splice(i, 1, newStu)
						}
					//3.点击确认修改，关闭模态框
					$('#alterUser').modal('hide')
					//4.重新渲染表格当前页，运行表格渲染那个函数
					showTable(dangqianyeNum)
				}
		
				//点击修改按钮时，把点击的当前行的数据分别显示在模态框对应的位置
			   $('#alterUser').on('show.bs.modal', function (event) {
					//在这个函数里边将这行数据渲染在表单元素里面
					var button = $(event.relatedTarget)
					var number = button.data('number')
					var name = button.data('name')
					var idcard = button.data('idcard')
					var rfid = button.data('rfid')
					var phone = button.data('phone')
					var zhuangtai = button.data('zhuangtai')
					var grade = button.data('grade')
					//做到现在已经知道如何修改input的值
					var modal = $(this)
					modal.find('.modal-body #stuNumber').val(number)
					modal.find('.modal-body #stuName').val(name)
					modal.find('.modal-body #stuIdCard').val(idcard)
					modal.find('.modal-body #stuRFID').val(rfid)
					modal.find('.modal-body #stuPhone').val(phone)
					modal.find('.modal-body #stuZhuangtai').val(zhuangtai)
					modal.find('.modal-body #stuGrade').val(grade)
				})
				
		
				//添加员工
				function addStudent() {//选项卡--添加员工
					var number = $('#addStuNumber').val()
					var name = $('#addStuName').val()
					var idcard = $('#addStuIdCard').val()
					var rfid = $('#addStuRFID').val()
					var phone = $('#addStuPhone').val()
					var zhuangtai = $('#addStuZhuangtai').val()
					var grade = $('#addStuGrade').val()
					var newStu = {
						number: number,
						name: name,
						idcard: idcard,
						rfid: rfid,
						phone: phone,
						zhuangtai: zhuangtai,
						grade: grade
					}
					student.push(newStu)//好像是把添加的数据增加在student数组的后边
					$('#addUser').modal('hide')//点击确认添加时，关闭模态框
					showTable(dangqianyeNum)//重新渲染当前页的数据
					showYema()//增加了数据，页码也可能会增加，所以也需要重新渲染一次页码
				}
				function zuhe() {//点击添加员工时，显示工号的地方会自动添加工号，把表单上次添加的数据清除
					// $('#cjbt').click()
					// var xiabiao = student.slice(-1)
					$('#addStuNumber').val(parseInt(student.slice(-1)[0].number) + 1)
					$('#addStuName').val('')
					$('#addStuIdCard').val('')
					$('#addStuRFID').val('')
					$('#addStuPhone').val('')
					$('#addStuZhuangtai').val('')
					$('#addStuGrade').val('')
				}
		
		
				//删除按钮
				function delRow(number) {//删除按钮
					//1.要删除数据  通过number（工号）去找到这个数据
					//2.删除dom节点(tr这个标签里边的所有东西)
					console.log(number)
					for (var i = 0; i < student.length; i++) {
						if (student[i].number == number) {//判断数组里的工号是否等于我点击删除的工号
							student.splice(i, 1)//上述条件成立，则删除
						}//删除完过后界面还没刷新，需要重新渲染一次表格
						showTable(dangqianyeNum)
						showYema()
					}
				}
		
		
				//锁定按钮
				function suoding(){
		
					if(jintong == 1){
						$('#button1').attr("disabled","true")//修改按钮变成禁用
						jintong = 0
					}
					if(jintong == 0){
						$('#button1').removeAttr("disabled")
						jintong = 1
					}
				}
		
			</script>
	</body>
</html>
